- Page 5b -

The Photoshop Guru's Handbook - "Creating the NUI"
Part 3 - 2D & 3D (inDepth Interface project)

Texture Mapping - adding/covering the interface with a texture pattern.
Part 2

Mapping your Texture:
The best, and simplest way to map a texture to a 3D object in Photoshop is to use the layer Blend modes. Each mode has it's own characteristics, and each mode has it's strengths and weaknesses. Here is a quick list of blend modes that will produce 'normal' and 'unnatural' results: (consult Photoshop's help files for more info on these modes)

The Blending Modes: a brief description for our purposes here.
  • Multiply - a dark, deep matted look
  • Screen - a bright, hazey, semi-transparent washed-out look
  • Overlay - a deep, richly toned look
  • Softlight - a softer version of Overlay, and a lighter version of Multiply
  • Hardlight - very similar to Overlay, but is less subtle and can produce a very 'solid' effect
  • Color Dodge - unusual effect in that it is extremely harsh and effects only the lightest areas of an underlying image
  • Color Burn - the exact opposite of Color Dodge, but it also a very harsh effect
  • Darken - very similar to Multiply, but produces a lighter blend effect, and effects only the darker areas of an underlying image
  • Lighten - the opposite of Darken, and very similar to Screen, but only effects the lightest areas of an underlying image
  • Difference - a very unnatural effect, whereby the entire colour contents of underlying layers is inverted; ala a film negative
  • Exclusion - very similiar to Difference, but is less harsh and doesn't produce the ugly dark outlines between light and dark tones
  • Hue - not worth mentioning here
  • Saturation - same as above
  • Color - will transfer all colour properties 'as is' to underlying layers, regardless of their current colour properties
  • Luminosity - will transfer all luminosity to underlying layers 'as is', regardless of the current luminous properties
The best Blend mode for texture mapping is Overlay. The next best is Multiply. And the 3rd best is Softlight, and then Hardlight. But combinations of these modes applied to separate layers containning the same texture can yield some good results also. You'll have to experiment with that a bit to get a clear idea of how texture doubling works.
Overlay mode will allow your texture to take on the exact same light and shadow properties that the interface has, thus making it seem as if the interface object is actually made from the texture material. Overlay and Hardlight modes can produce very glossy, solid surface qualities on your texture; provided your interface has those qualities already. If you'd like less gloss, but want to maintain the interface's highlight and shadow properties, just switch the Blend mode to either Softlight or Multiply; depending on how much of a 'matted' look you want. Multiply mode produces a darker matte look, and Softlight is more subtle.

And that's all there is to it folks!
Go ahead an experiment with some textures you like using. If you like creating your textures by hand from scratch, then do so. But here's a tip; photos of textures can produce some of the better results. And some of the more common textures to use for 'psuedo' realistic texture mapping are wood, concrete, marble, sand, leather, paper, various cloths, various metals, and on and on. You get the idea right? The better the photo's quality, the easier it will be to get good results.

GURU ADVICE:
If you really want to master Photoshop and make it bow to your creative prowess (ooo big words huh! hehehe), don't become too overly dependant on all the filters it has, while you're in the beginning stages of learning the program. That will only have an adverse effect on how versitile you can become with it. Just to show you a small example of what i mean by this, have a look at this version of the interface we just went through creating:

3D Interface - no lighting filter
- No Lighting Filter Used For This -

Another way to create 3D-like effects is to not create them using the Lighting filter. The Lighting filter is a great and powerful tool yes, but it also has it's weaknesses. The first of which is - it makes you lazy toward experimenting and getting to know what all the tools can actually do for you, if you give them a fair chance. Another one being that you have way more control over your creations if you do them by hand, from scratch, using only the tools in the Tool palette. And that's how i created the interface sample above. I used all of the steps laid out in the previous pages, but used no Lighting filter, and no special effects. In fact, everything for that interface was created without the aid of any major filters. The only ones i used were the Blur & the Emboss filters. And i didn't even have to use the Blur filter either... i could have very easily used the Blur 'Tool' instead. Do you get what i mean by all this? I realize that the above interface is not an award-winning design by any means... but that wasn't my intent when i created it. I created it just to show you that you *don't* have to rely on special filters all the time.

So instead, you can just use a flat 2D shape filled with a colour or texture, and some separate layers laid on top of that one to create your highlights and shadows that will produce a 3 dimensional effect on the 2D shape. I use this method much more often than i do the Lighting filter; because i like the control it gives me. When using this method however, you'll need to put your texture layers *below* your highlight and shadow layers. And in case you're wondering... highlight & shadow layers are nothing more than layers that contain white and black, and are set to a Blend mode that allows them to blend into the underlying layers containing the coloured or textured shapes.
Try creating something with this method also, just to get an idea of what's involved with it. It doesn't have to be anything special, even just creating a simple button will help you understand this approach. And if you need a short example of how to apply this method, just review the 'Interface Exercise' in Part 2 - "Nuts & Boltz" of this navDesign series. It can only make you better, right? :?)=)

If anything in this section has caused you to become confused or lost, just be patient. If this is all new to you, that's bound to happen. Just restart at the top and go through the steps again, taking careful note of what's being done in each step. It'll all sink in very shortly. And don't forget, you can download this whole section from the front page of this series. If you'd care to do that now, go here.



3D Shapes / Inset Lines / View Screens
Buttons / Texture Mapping / Adding Text

> To the Top <
> Back to "2D & 3D" <


- Page 5b -

"The Photoshop Guru's Handbook"  and all contents of this site
are copyright 96/00 Mark Anthony Larmand - (aka theKeeper) all rights reserved.